const resolveApp = require("./path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");

const { merge } = require("webpack-merge");

// 测量打包时间的插件
const speedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new speedMeasurePlugin();

const prodConfig = require("./webpack.prod");
const devConfig = require("./webpack.dev");

const commonConfig = (isProduction) => ({
  entry: {
    main: "./src/main.js",
    // index: "./src/index.js",
  },
  output: {
    filename: "js/[name].[contenthash:6].bundle.js",
    path: resolveApp("./build"),
    chunkFilename: "[name].[chunkhash:6].chunk.js",
    // publicPath: "https://lyc.com/cdn",
  },
  resolve: {
    extensions: [".js", ".json", ".wasm", ".mjs", ".vue", ".jsx"],
    alias: {
      "@": resolveApp("./src"),
      pages: resolveApp("./src/pages"),
    },
  },
  optimization: {
    // minimizer: [
    //   new TerserPlugin({
    //     extractComments: false,
    //   }),
    // ],
    chunkIds: "deterministic",
    splitChunks: {
      chunks: "all",
      minSize: 20000,
      minChunks: 1,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          filename: "js/[id]_vendors.js",
          name: "chunk-vendors.js",
          priority: -10,
        },
        default: {
          minChunks: 2,
          filename: "js/common_[id].js",
          priority: -20,
        },
      },
    },
    runtimeChunk: {
      name: "runtime",
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        use: "babel-loader",
      },
      {
        test: /\.vue$/i,
        use: "vue-loader",
      },
      {
        test: /\.css$/i,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : "style-loader",
          "css-loader",
        ],
        sideEffects: true,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolveApp("./index.html"),
      // inject: 'body',
      cache: true, // 当文件没有发生任何变化，直接使用之前的缓存
      minify: isProduction
        ? {
            removeComments: true, // 是否移除注释
            removeRedundantAttributes: true, // 是否移除多余的属性
            removeEmptyAttributes: true, // 是否移除空属性
            collapseWhitespace: false, // 折叠空格
            removeStyleLinkTypeAttributes: true,
            minifyCSS: true,
            // minifyJS: {
            //   mangle: {
            //     toplevel: true,
            //   },
            // },
          }
        : false,
    }),
    new VueLoaderPlugin(),
    // new webpack.ProviderPlugin({
    //   axios: 'axios',
    //   axios: ['axios', 'get']
    // })
  ],
});

module.exports = function(env) {
  const isProduction = env.production;
  process.env.NODE_ENV = isProduction ? "production" : "development";

  const config = isProduction ? prodConfig : devConfig;
  const mergeConfig = merge(commonConfig(isProduction), config);

  return smp.wrap(mergeConfig);
};
